import { Button, Table } from 'antd'
import { ColumnsType } from 'antd/es/table'
import { ConfigProvider } from 'antd'
import zhCN from 'antd/locale/zh_CN';
import enUS from 'antd/locale/en_US';

import React,{useState} from 'react'
import { useTranslation } from 'react-i18next'
export default function TestAntd() {
    const { t, i18n } = useTranslation(['app'])
    const columns: ColumnsType<any> = [
        {
            title: t('index'),
            render(value: any, row: any, index: number) {
                return (index + 1)
            }
        },
        {
            title: t('name'),
            dataIndex: 'name'
        },
        {
            title: t('age'),
            dataIndex: 'age'
        }
    ]

    const data = [
        {
            id: 1,
            name: '张三',
            age: 18
        },
        {
            id: 2,
            name: '李四',
            age: 20
        },
        {
            id: 3,
            name: '王五',
            age: 18
        }
    ]
    const [languageFlag, setLanguageFlag] = useState<boolean>(true)
    return (
        <ConfigProvider locale={languageFlag ? zhCN : enUS}>
            <div>
                <Button type='primary' onClick={()=>{
                    setLanguageFlag(true);
                    i18n.changeLanguage('zh')
                }}>中文</Button>
                <Button type='primary' onClick={()=>{
                    setLanguageFlag(false);
                    i18n.changeLanguage('en')
                }}>英文</Button>
                <Table
                    rowKey={'id'}
                    columns={columns}
                    dataSource={data}
                    pagination={{
                        current: 1,
                        pageSize: 5,
                        showSizeChanger: true,
                        pageSizeOptions: [5, 10, 15]
                    }}
                />
            </div>
        </ConfigProvider>
    )
}
